<ion-header>
  <ion-navbar>
      <ion-title>首页</ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
<div>
  <div #info_window>
      <div class="infoWindow-wrap">
          <div class="infoWindow-title">设备信息</div>
          <div class="infoWindow-body" *ngIf="infoLoading">
              <div class='infoWindow-body-tip'>正在加载，请稍等</div>
          </div>
          <div class="infoWindow-body" *ngIf="!infoLoading && !deviceObj">
              <div class='infoWindow-body-tip'>抱歉没有查到该设备数据</div>
          </div>
          <div class="infoWindow-body" [hidden]="infoLoading || !deviceObj">
              <table>
                  <tbody>
                  <tr>
                      <td class="iw-label">设备名称</td>
                      <td class="iw-info" colspan="3">{{deviceObj?.name}}</td>
                  </tr>
                  <tr>
                      <td class="iw-label">设备编号</td>
                      <td class="iw-info" colspan="3">{{deviceObj?.physicalCode}}</td>
                  </tr>
                  <tr>
                      <td class="iw-label">地理位置</td>
                      <td class="iw-info" colspan="3">{{deviceObj?.address}}</td>
                  </tr>
                  <tr>
                      <td class="iw-label">风机</td>
                      <td class="iw-info">{{deviceObj?.fanFlag | devPipe:'fanFlag' | isNullPipe}}</td>
                      <td class="iw-label">杀虫灯</td>
                      <td class="iw-info">{{deviceObj?.lampFlag | devPipe:'lampFlag' | isNullPipe}}</td>
                  </tr>
                  <tr>
                      <td class="iw-label">湿&emsp;度</td>
                      <td class="iw-info">{{deviceObj?.airHumidity | isNullPipe}}%</td>
                      <td class="iw-label">温&emsp;度</td>
                      <td class="iw-info">{{deviceObj?.airTemperature | isNullPipe}}℃</td>

                  </tr>
                  <tr>
                      <td class="iw-label">光&emsp;照</td>
                      <td class="iw-info">{{deviceObj?.beam | isNullPipe}}</td>
                      <td class="iw-label">虫  量</td>
                      <td class="iw-info">{{deviceObj?.bugRate | isNullPipe}}只</td>
                  </tr>
                  <tr>
                      <td class="iw-label">最后同步</td>
                      <td class="iw-info" colspan="3">{{deviceObj?.updateTime | dateFormatPipe:"yyyy-MM-dd hh:mm:ss" | isNullPipe}}</td>
                  </tr>

                  <tr style="border-bottom: 1px solid #ddd;">
                      <td style="padding: 5px ;text-align: center" colspan="4">
                          <button [attr.id]="deviceObj?.id" dynamic-gis-btn color="primary" small ion-button block>更多信息</button>
                      </td>
                  </tr>
                  </tbody>

              </table>
          </div>
          <!--<p><el-button type="primary" size="small"  @click="openDeviceDialog()">查看详细</el-button></p>-->
      </div>
  </div>
</div>

<div class="static">
  <ion-grid>
    <ion-row>
      <ion-col col-3>
        <div class="sta-wrap">
          <div class="title">安装总数</div>
          <div class="count">{{statisData.totalNum}}</div>
          <div class="sta-color" style="background: #0b7ee3"></div>
        </div>
      </ion-col>
      <ion-col col-3>
        <div class="sta-wrap">
          <div class="title">工作中</div>
          <div class="count">{{statisData.manualMode + statisData.tcMode + statisData.lcMode}}</div>
          <div class="sta-color" style="background: #1fac97"></div>
        </div>
      </ion-col>
      <ion-col col-3>
        <div class="sta-wrap">
          <div class="title">停止中</div>
          <div class="count">{{statisData.stopMode}}</div>
          <div class="sta-color" style="background: #8d8d8d"></div>
        </div>
      </ion-col>
      <ion-col col-3>
        <div class="sta-wrap">
          <div class="title">预警中</div>
          <div class="count">{{statisData.fault}}</div>
          <div class="sta-color" style="background: orange"></div>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</div >
<!-- <div class="searchBar">搜索设备</div> -->
<ion-searchbar class="searchBar" placeholder="输入编码" [(ngModel)]="searchKey"
[showCancelButton]="true" cancelButtonText="取消" (ionInput)="searchOnHandler($event)"
(ionCancel)="searchOnCancel($event)" ></ion-searchbar>
<div class="searchBarWrap" #searchBar_wrap>
    <a *ngFor="let item of devList | devPipe:'pyFilter':searchKey" (click)='focusItem(item)'>
        {{item?.physicalCode}}
    </a>
</div>
<div #map_container class="map_container">
</div>
<a class="setFitViewBtn" (click)="setMapFitView()">
    <ion-icon name="move"></ion-icon>
</a>
</ion-content>
<!-- <ion-content>


</ion-content> -->
 <!-- <button ion-button secondary menuToggle>Toggle Menu</button> -->

